<template>
  <Space>
    <template v-for="item in varTestBtnList" :key="item.key">
      <AButton
        :disabled="!$auth(item.permission)"
        ghost
        :color="item.value"
        @click="handleBtn(item.key)"
        >{{ item.title }}</AButton
      >
    </template>
    <div></div>
  </Space>
  <div style="background-color: #f0f">
    <RichText
      v-model:value="richTextValue"
      @update:modelValue="handleRichText"
    />
  </div>
  <div v-html="richTextValue"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Alert, Space, Card, Divider } from 'ant-design-vue';
import { AButton } from '@/components/basic/button';
import type { PermissionType } from '@/permission/permCode';
import Api from '@/api/';
import RichText from '@/components/basic/rich-text/Index.vue';

const richTextValue = ref(
  '<p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://127.0.0.1:7001/upload/2025-07-29/图片/Icon-20250729161117.png" alt="" width="194" height="205"></p> <h2 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h2> <p style="text-align: center;"><span style="font-size: 36px;">视频简介</span></p> <p style="text-align: center;">&nbsp;</p> <p><video style="display: table; margin-left: auto; margin-right: auto; width: 501px; height: 252px;" controls="controls" width="501" height="252"> <source src="http://127.0.0.1:7001/upload/2025-07-29/视频/carStream-20250729161148.mp4" type="video/mp4"></video></p> <p>&nbsp;</p> <p>Please try out the features provided in this full featured example (excluding <a href="../../../../tinymce/features/">Premium Plugins</a> ).</p> <h2>Got questions or need help?</h2> <ul> <li>Our <a class="mceNonEditable" href="../../6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li> <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li> <li>We also offer enterprise grade support as part of <a href="../../../../pricing">TinyMCE premium plans</a>.</li> </ul> <h2>A simple table to play with</h2> <table style="border-collapse: collapse; width: 100%;" border="1"> <thead> <tr> <th>Product</th> <th>Cost</th> <th>Really?</th> </tr> </thead> <tbody> <tr> <td>TinyMCE Cloud</td> <td>Get started for free</td> <td>YES!</td> </tr> <tr> <td>Plupload</td> <td>Free</td> <td>YES!</td> </tr> </tbody> </table> <h2>Found a bug?</h2> <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p> <h2>Finally ...</h2> <p>Don\'t forget to check out our other product <a href="http://www.plupload.com" target="_blank" rel="noopener">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p> <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.</p>'
);
const handleRichText = (value: string) => {
  // console.log(111111111111, value);
  richTextValue.value = value;
};

type varTestType = {
  title: string;
  key: string;
  value: string;
  permission: PermissionType;
};
const varTestBtnList: varTestType[] = [
  {
    title: '获取列表',
    key: 'var-list',
    value: '#1677FF',
    permission: 'varTest:list',
  },
  {
    title: '测试sse',
    key: 'testsse',
    value: '#F5222D',
    permission: 'varTest:testsse',
  },
  {
    title: '测试Redis',
    key: 'testRedis',
    value: '#FA541C',
    permission: 'varTest:testRedis',
  },
  {
    title: 'getHttpData',
    key: 'getHttpData',
    value: '#FAAD14',
    permission: 'varTest:getHttpData',
  },
  {
    title: 'postHttpData',
    key: 'postHttpData',
    value: '#13C2C2',
    permission: 'varTest:postHttpData',
  },
];

const handleBtn = async (value: any) => {
  let res;
  switch (value) {
    case 'var-list':
      res = await Api.businessVarTest.varTestVarList({});
      break;
    case 'testsse':
      res = await Api.businessVarTest.varTestTestsse();
      break;
    case 'testRedis':
      res = await Api.businessVarTest.varTestTestRedis();
      break;
    case 'getHttpData':
      res = await Api.businessVarTest.varTestGetHttpData();
      break;
    case 'postHttpData':
      res = await Api.businessVarTest.varTestPostHttpData();
      break;
  }
  console.log(res);
};
</script>
